<!DOCTYPE html>
<html>
  <head>
    <title>IOT LAO WANG</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  </head>
  <body>
    <div class="card">
      <h3>Update web page without refresh</h3><br>
      <h1>POT Value : <span style="color:rgb(21, 0, 255)" id="POTvalue">0</span></h1><br>
      <br><a href="https://iot_wang.com">iot_wang.com</a>
      <h4>
        <button onclick="help()">Help</button><br><br>
        <div id="myDIV"> </div>
      </h4>
    </div>
<!-------------------------JavaScrip------------------------->
    <script>
      setInterval(function()
      {// Call a function repetatively with 2 Second interval
        getPOTval();
      }, 2000);//2000mSeconds update rate
      //-------------------------------------------------------
      function getPOTval()
      {
        var POTvalRequest = new XMLHttpRequest(); // 与服务器异步交互数据
        POTvalRequest.onreadystatechange = function()
        {
          if(this.readyState == 4 && this.status == 200)
          {
            document.getElementById("POTvalue").innerHTML =
            this.responseText;
          }
        };
        POTvalRequest.open("GET", "readPOT", true);
        POTvalRequest.send();
      }
      //-------------------------------------------------------
      function help()
      {
        var x = document.getElementById("myDIV");
        var message = "POT connected to ADC0 : 12-bit value (0 ---> 4095)";
        if (x.innerHTML == "") x.innerHTML = message;
        else x.innerHTML = "";
      }
    </script>
  </body>
</html>